<template>
    <div>
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="后台首页" :text3="username"/>
        <div class="home-page-container">
            <div style="display:flex">
                <div class="order-content" v-for="item in orderlist" :key="item.id">
                    <i :class="item.icon"></i>
                    <div>
                        <p class="order-content-text">{{item.text}}</p>
                        <p class="order-content-num">{{item.num}}</p>
                    </div>
                </div>
            </div>
            <div id="myChart" :style="{width: '800px', height: '400px',marginTop:'25px'}"></div>
        </div>
    </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {ordertotaldata} from "@/apis/api"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"xxx",
            username:"",
            orderlist:[
                {id:"0",icon:"el-icon-document-copy",text:"总订单",num:""},
                {id:"1",icon:"el-icon-trophy",text:"总销售额",num:""},
                {id:"2",icon:"el-icon-shopping-bag-1",text:"今日订单数",num:""},
                {id:"3",icon:"el-icon-grape",text:"今日销售额",num:""},
            ]
        }
    },
    created(){
      this.portrait=imgUrl
      this.username=account
    },
    mounted(){
        ordertotaldata().then(res=>{
            this.orderlist[0].num=res.data.totalOrder
            this.orderlist[1].num=res.data.totalAmount
            this.orderlist[2].num=res.data.todayOrder
            this.orderlist[3].num=res.data.totayAmount
            this.drawLine(res.data);
        })
    },
    methods:{
        drawLine(res){
             // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
             myChart.setOption({
                title: {
                    text: '数据统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单数据', '订单金额']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: res.xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单数据',
                        type: 'line',
                        stack: '总量',
                        data: res.orderData
                    },
                    {
                        name: '订单金额',
                        type: 'line',
                        stack: '总量',
                        data: res.amountData
                    },
                ]
            });
             }      
        }

}

    

       
</script>

<style lang=less scoped>
    .home-page-container{
        margin:15px;  
        .order-content{
            margin:10px;
            width:220px;
            height:80px;
            align-items: center;
            justify-content: space-around;
            background-color:#fff;
            display:flex;
            .el-icon-document-copy,.el-icon-trophy,.el-icon-shopping-bag-1,.el-icon-grape{
                font-size:50px;
            }
            .el-icon-document-copy{
                color:#1C9ADC;
            }
            .el-icon-trophy{
                color:#D83685;
            }
            .el-icon-shopping-bag-1{
                 color:#1C9ADC;
            }
            .el-icon-grape{
                 color:#1AFA29;
            }
            .order-content-text{
                    color:#aaa;
                }
            .order-content-num{
                    margin-top:3px;
                    color:darkslategrey;
                    font-weight: 600;
                }
        }  
    }
</style>